<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        li{
            float: left;
        }
        .first{
            /* margin: 0px 15px; */    
        }
        .item{
            padding: 0px 10px;
            margin: 5px 10px;
        }
        .item:hover{
            color:red;
            background-color: blue;
            cursor: pointer;
        }
        .clean{
            clear: left;
            border: 1px black solid;
            margin-right: 40px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="first">难度：</li>
        <li class="item">全部</li>
        <li class="item">初级</li>
        <li class="item">中级</li>
        <li class="item">高级</li>
        <p  class="clean"></p>
    </ul>
    <p>Lorem ipsum   dolor sit amet consectetur, adipisicing elit. Exercitationem fugit similique reprehenderit dolore! Doloremque obcaecati ab optio molestiae recusandae nemo sapiente repellendus atque deserunt iure! Ad cum consequuntur dignissimos blanditiis!</p>
</body>
</html>